<template>
  <n-config-provider
    :theme="themeConfig.theme ? darkTheme : null"
    :class="inwh100"
  >
    <n-card class="wh100" style="background: #99999900">
      <n-el tag="div" class="login-box">
        <n-el tag="div" class="login-box-content">
          <n-el tag="div" class="login-box-content-title">
            <n-el tag="h1">{{ isLogin ? "登录" : "注册" }}</n-el>
          </n-el>
          <n-el tag="div" class="login-box-content-form">
            <n-form label-width="100px" label-placement="top" v-if="isLogin">
              <n-form-item label="用户名">
                <n-input
                  v-model:value="loginForm.username"
                  placeholder="请输入用户名"
                ></n-input>
              </n-form-item>
              <n-form-item label="密码">
                <n-input
                  v-model:value="loginForm.password"
                  placeholder="请输入密码"
                ></n-input>
              </n-form-item>
              <n-form-item>
                <n-space justify="center" style="width: 100%" v-if="isLogin">
                  <n-button
                    type="primary"
                    style="width: 200px"
                    @click="loginSubmit"
                    >登录</n-button
                  >
                </n-space>
              </n-form-item>
              <div
                style="
                  text-decoration: underline;
                  cursor: pointer;
                  width: 15%;
                  text-align: center;
                  float: right;
                "
                @click="isLogin = false"
              >
                去注册
              </div>
            </n-form>
            <n-form label-width="100px" label-placement="top" v-else>
              <n-form-item label="用户名">
                <n-input
                  v-model:value="registerForm.username"
                  placeholder="请输入用户名"
                ></n-input>
              </n-form-item>
              <n-form-item label="密码">
                <n-input
                  v-model:value="registerForm.password"
                  placeholder="请输入密码"
                ></n-input>
              </n-form-item>
              <n-form-item label="确认密码">
                <n-input
                  v-model:value="registerForm.confirmPassword"
                  placeholder="请输入确认密码"
                ></n-input>
              </n-form-item>
              <n-form-item>
                <n-space justify="center" style="width: 100%" v-if="!isLogin">
                  <n-button
                    type="primary"
                    style="width: 200px"
                    @click="registerSubmit"
                    >注册</n-button
                  >
                </n-space>
              </n-form-item>
              <div
                style="
                  text-decoration: underline;
                  cursor: pointer;
                  width: 15%;
                  text-align: center;
                  float: right;
                "
                @click="isLogin = true"
              >
                去登录
              </div>
            </n-form>
          </n-el>
        </n-el>
      </n-el>
    </n-card>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { darkTheme } from "naive-ui";
// @ts-ignore
import { useThemeConfig, useUserConfig } from "/@bean/GlobalConfig";
import { ref } from "vue";
// @ts-ignore
import router from "/@/router";
//@ts-ignore
import * as sysApi from "/@api/hz-system-api";
import { ApiEntity } from "/@bean/GlobalEntity";
import { Moon, Sunny } from "@vicons/ionicons5";
const inwh100 = ref("wh100 wh1002");

const big = ref(
  "https://students-list.oss-cn-hangzhou.aliyuncs.com/login/rightsidebig/3.png"
);

const sj = ref(
  "https://students-list.oss-cn-hangzhou.aliyuncs.com/login/rightsidemin/1.gif"
);

//@ts-ignore
let message = useMessage();

const storesThemeConfig = useThemeConfig();
const useUser = useUserConfig();
// @ts-ignore
const { themeConfig } = storeToRefs(storesThemeConfig);
const { userInfo } = storeToRefs(useUser);

const isLogin = ref(true);

const loginForm = ref({
  username: "",
  password: "",
});

const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
});

// @ts-ignore
watch(isLogin, (val) => {
  if (val) {
    registerForm.value = {
      username: "",
      password: "",
      confirmPassword: "",
    };
  } else {
    loginForm.value = {
      username: "",
      password: "",
    };
  }
});

const loginSubmit = async () => {
  if (!loginForm.value.username) {
    message.error("请输入用户名");
    return;
  }
  if (!loginForm.value.password) {
    message.error("请输入密码");
    return;
  }
  if (loginForm.value.username === "hz") {
    router.push({
      path: "/bigscreen",
    });
    return;
  }
  let result_login = await sysApi.loginIn(loginForm.value);

  if (result_login.code !== 200) {
    message.error(result_login.msg);
    return;
  }
  let result_userInfo = await sysApi.getUserInfo();
  if (result_userInfo.code === 200) {
    useUser.setUserInfo(result_userInfo.data);
    userInfo.value.token = result_login.data;
    message.success(userInfo.value.username + "，欢迎回来");
  } else {
    message.error("获取用户信息失败");
    return;
  }
  router.push({
    path: "/bigscreen",
  });
};

const registerSubmit = async () => {
  console.log(registerForm.value);
  if (!registerForm.value.username) {
    message.error("请输入用户名");
    return;
  }
  if (!registerForm.value.password) {
    message.error("请输入密码");
    return;
  }
  if (!registerForm.value.confirmPassword) {
    message.error("请输入确认密码");
    return;
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    message.error("两次密码不一致");
    return;
  }
  let result = await sysApi.registerAccount(registerForm.value);
  if (result.code === 200) {
    message.success("注册成功");
    isLogin.value = true;
  } else {
    message.error(result.msg);
  }
};
</script>

<style scoped>
.login-box {
  width: 480px; /* 600px的80% */
  height: 480px; /* 600px的80% */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(50% - 240px); /* 将原有的300px改为240px，即480px的一半 */
  left: 0;
  transform: translateX(10%);
}

.login-box-content {
  width: 400px;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(177, 93, 93, 0.7); /* 边框颜色保持不变 */
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2); /* 阴影效果保持不变 */
  transition: box-shadow 0.6s ease-in-out;
  background: -webkit-linear-gradient(to right, rgba(247, 38, 38, 0.8), rgba(247, 86, 86, 0.8)); /* 背景色从粉色渐变到蓝色 */
  background: linear-gradient(to right, rgba(247, 38, 38, 0.8), rgba(250, 69, 69, 0.8)); /* 兼容非Chrome浏览器的同样设置 */


}

.login-box-content-title {
  text-align: center;
  margin-bottom: 24px; /* 30px的80% */
  color: #dddddd;
}

.login-box-content-form {
  padding: 24px; /* 30px的80% */
  color: #aaaaaa;
}

n-button[type="primary"] {
  background-color: #ffaa00;
  border-color: #ffaa00;
  color: #282828;
  transition: transform 0.3s ease;
}

n-button[type="primary"]:hover {
  transform: scale(1.05);
}
.right-section {
  float: right;
  width: 400px; /* 500px的80% */
  height: 400px; /* 500px的80% */
  text-align: center;
}

.right-section img {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  margin-top: 0;
  max-width: 100%;
  max-height: 100%;
}

.wh1002 {
  background-image: url("https://students-list.oss-cn-hangzhou.aliyuncs.com/hz-bg/hz-bg-45.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

.wh1003 {
  background-image: url("https://students-list.oss-cn-hangzhou.aliyuncs.com/hz-bg/hz-bg-123.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}

.circle-container {
  position: relative;
  width: 100px;
  height: 100px;
  top: 5%;
  left: 80%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  overflow: hidden;
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.circle-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  animation: rotateAndChangeColor 8s infinite; /* Increase animation duration */
  z-index: 0;
}

@keyframes rotateAndChangeColor {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 15px #add8e6; /* Light blue color */
  }
  30% {
    transform: rotate(120deg);
    box-shadow: 0 0 15px #0000ff; /* Blue color */
  }
  60% {
    transform: rotate(240deg);
    box-shadow: 0 0 15px #add8e6;
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 15px #add8e6;
  }
}
</style>